<template>
  <div id="watchSE" v-if="data && productData" >
		<!-- --------------------------------一楼结构------------------------- -->
		<div class="f1" :class="{ scroll: scrollTop > 0 }">
			<div class="center">
				<div class="box">
					<p>Apple Watch Series SE</p>
				</div>
			</div>
		</div>
		<!-- --------------------------------二楼结构------------------------- -->
		<div class="f2">
			<div class="center">
				<div class="box">
					<p>
						符合条件的情况下可享免息分期付款。<button type="button">进一步了解 ></button>
					</p>
				</div>
			</div>
		</div>
		<!------------------------------------- 三楼样式结构 ----------------------------->
		<div class="f3">
			<div class="center">
				<div class="f3type" style="position:relative" >
					<!-- 左边大图区域 -->
					<div class="fl" :class="{
              scroll: scrollTop > 0 && scrollTop <1026,
              scroll1: scrollTop >=1026 ,
            }">
						<div class="fl_1">
							<img v-if="imgType == 1" :src="data[`watchpay3_3_3.jpg`]" alt="">
							<img v-if="imgType == 2" :src="data[`MPDU3ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]" alt="">
							<img v-if="imgType == 3" :src="data[`MPF43ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]" alt="">
							<img v-if="imgType == 4" :src="data[`MKWA3ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]" alt="">
							<img v-if="imgType == 5" :src="data[`MPD83ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]" alt="">
						</div>
						<div class="fl_2">
							<div>
								<svg viewBox="0 0 35 35" width="35px" height="35px">
									<path fill="none"></path>
									<path
										d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z">
									</path>
								</svg>
								<p>选择免费送货服务，或者到 Apple Store 零售店提取现货商品。</p>
	
						</div>
							<div>
								<svg viewBox="0 0 35 35" width="35px" height="35px">
									<path fill="none" d="M0 0h35v35H0z"></path>
									<path
										d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
										fill="none"></path>
									<path
										d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z">
									</path>
									<path
										d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z">
									</path>
								</svg>
								<p>简单免费的退货服务</p>
							</div>
						</div>
					</div>
					<!-- 右边选择区域 -->
					<div class="fr">
						<div class="fr_1">
							<span>Apple Watch</span>
							<span>银色铝金属表壳;单圈表带</span>
							<div>RMB 208/月 (0% 费率 24 个月分期) 或 RMB 4999 起</div>
							<div>不锈钢表壳经久耐用，表层经过抛光处理，呈现镜面般闪亮的光泽。</div>
							<div>回环式运动表带采用柔软透气的双层尼龙精织而成,搭配回环式扣件,可轻<br>松快速地进行调节。</div>
						</div>
						<div class="fr_2">
							<div>表带配色</div>
							<!-- <div>你的风格</div> -->
						</div>
						<div class="fr_3">
							<div>颜色 - {{colorTitle}}</div>
							<div>
								<div class="imgArray">
									<div class="imgBor" :class="imgType == 1 ? 'bor1' : ''">
										<img :src="data[`MN3E3ref_SW_COLOR.jpg`]" alt="" @click="qhImg(1)">
									</div>
									<div class="imgBor" :class="imgType == 2 ? 'bor1' : ''">
										<img :src="data[`MN2G3ref_SW_COLOR.jpg`]" alt="" @click="qhImg(2)">
									</div>
									<div class="imgBor" :class="imgType == 3 ? 'bor1' : ''">
										<img :src="data[`MN2R3ref_SW_COLOR.jpg`]" alt="" @click="qhImg(3)">
									</div>
									<div class="imgBor" :class="imgType == 4 ? 'bor1' : ''">
										<img :src="data[`MKWA3ref_SW_COLOR.jpg`]" alt="" @click="qhImg(4)">
									</div>
									<div class="imgBor" :class="imgType == 5 ? 'bor1' : ''">
										<img :src="data[`MKV33ref_SW_COLOR.jpg`]" alt="" @click="qhImg(5)">
									</div>
									<!-- <img :src="data[`MN6K3_SW_COLOR.jpg`]" alt="" @click="qhImg(1)">  -->
									<!-- <img :src="data[`MPL93_SW_COLOR.jpg`]" alt="" @click="qhImg(2)">
									<img :src="data[`MPL83_SW_COLOR.jpg`]" alt="" @click="qhImg(3)">
									<img :src="data[`MPL73_SW_COLOR.jpg`]" alt="" @click="qhImg(4)">
									<img :src="data[`MPL63_SW_COLOR.jpg`]" alt="" @click="qhImg(5)">
									<img :src="data[`MPL53_SW_COLOR.jpg`]" alt="" @click="qhImg(6)"> -->
								</div>
							</div>
							<div>
								<p>了解更多表带类型,尝试不同表壳材质。Apple Watch 定制坊让你充分展现个人风格。Apple 独家提供。</p>
							</div>
							<!-- <button>
								<span>打造你的风格</span>
							</button> -->
						</div>
						<div class="fr_3_4">表壳尺寸</div>
						<div class="fr_4 pointer"
						v-for="(item,i) in productData.biaokechicun"
						:key="i"
						@click="changeSize(i)"
						:class="{active:now2==i}">
							<div class="text">
								<p>{{item.length}}</p>
								<p>适合 130–200 毫米腕围。</p>
							</div>
							<div class="rmb">
								<p>RMB {{Math.floor(item.price / 24)}}/月<sup>‡</sup> 或</p>
								<p>RMB {{item.price}}</p>
							</div>
						</div>
						<!-- <div class="fr_5 pointer">
							<div class="text">
								<p>45 毫米</p>
								<p>适合 140–220 毫米腕围。</p>
							</div>
							<div class="rmb">
								<p>RMB 221/月<sup>‡</sup> 或</p>
								<p>RMB 5299</p>
							</div>
						</div> -->
						<!-- <div class="fr_5_6">哪种表壳尺寸适合你？</div> -->
						<div class="fr_6">
							<div>连接</div>
							<a>GPS 表款与 GPS + 蜂窝网络表款有何不同？</a>
							<div>GPS + 蜂窝网络</div>
							<div>只需 Apple Watch 就能打电话、发消息。支持家人共享设置。</div>
							<a>进一步了解家人共享设置</a>
							<div>支持的运营商</div>
							<div>
								<img :src="data[`watch-select-carrier-chinaunicom-201809.jpg`]" alt="">
								<img :src="data[`watch-select-carrier-chinatelecom-201811.jpg`]" alt="">
								<img :src="data[`watch-select-carrier-chinamobile-201901.jpg`]" alt="">
							</div>
						</div>
						<div class="fr_6_7">表带尺码</div>
						<div class="fr_7 pointer">
							<div class="text">
								<p>单一尺寸</p>
								<p>表带适合 145–220 毫米腕围。</p>
							</div>
						</div>
						<!--右边购买添加购物袋页面  -->
						<div class="fr_8">
							<div class="fr_8_1">
								<h2>RMB 221/月 (24 期)</h2>
								<p>或</p>
								<h2>RMB 5,299</h2>
								<p>可享免息分期付款</p>
							</div>
							<div class="fr_8_2">
								<div>
						  	<img :src="data[`购物车1.png`]" />
									<div>
										<p>取货：</p>
										<a href="#"><span>Apple 郑州万象城</span> 目前无货</a>
									</div>
								</div>
								<div>
									<img :src="data[`购物车2.png`]" />
									<div>
										<p>今天订购。 送货至<span>莲湖区<sup>††</sup></span>，预计送达日期：</p>
							  	<a href="#">周日 2022/08/21 — 免费</a>
									</div>
								</div>
							</div>
							<button @click="addToShopBag">添加购物袋</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 包装内容 -->
			<div class="f4">
				<div class="center">
					<div class="box">
						<h2>包装内容</h2>
						<div class="box1">
							<div>
								<div class="box1-1">
									<img :src="data[`45-stainless-steel-silver-case.jpg`]" />
								</div>
								<p>不锈钢表壳</p>
							</div>
							<div>
								<div>
									<img :src="data[`sport-loop-pride-band.jpg`]" />
								</div>
								<p>回环式运动表带</p>
							</div>
			 			<div>
								<div class="box3-1">
									<img :src="data[`watch-witb-charger-202109.jpg`]" />
								</div>
								<p>磁力快速充电器转 USB‑C 连接线 (1 米)</p>
							</div>
						</div>
						<div class="box3">为了实现我们的环保目标，Apple Watch 不再随附电源适配器。包装盒内随附一根磁力快速充电器转 USB-C 连接线，可支持快速充电，并兼容 USB‑C 电源适配器和电脑端口。
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<msg-mask ref="msgMaskbtn" />
  </div>
</template>

<script>
import MsgMask from '@/components/MsgMask.vue';
  export default {
  components: { MsgMask },
    data() {
    return {
      data: null,
		productData:null,
	  	userBagData:null,
      proTitle:'',
      proPrice:0,
      proImg:'',
		now:1,
		now2:-1,
		imgType : 1,
		scrollTop: null,
		//颜色标题
		colorTitle:'',
		//尺寸标题
		sizeTitle:'',
    };
  },
  methods: {
	qhImg(val){
		this.imgType = val;
		this.now = val;
		this.now2 = -1;
		// console.log(val);
		if(val == 1){
			this.proImg = this.data[`watchpay3_3_3.jpg`]
			this.colorTitle = '红色'

			// console.log(val);
		}
		else if(val == 2){
			this.proImg = this.data[`MPDU3ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]
			this.colorTitle = '黄色'

			// console.log(val);
		}
		else if(val == 3){
			this.proImg = this.data[`MPF43ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]
			this.colorTitle = '绿色'

		}
		else if(val == 4){
			this.proImg = this.data[`MKWA3ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]
			this.colorTitle = '粉色'

		}
		else if(val == 5){
			this.proImg = this.data[`MPD83ref_VW_34FR%2Bwatch-41-alum-silver-cell-8s_VW_34FR_WF_CO_GEO_CN.jpg`]
			this.colorTitle = '黑色'

		}
	},
    getData() {
      let url = "http://localhost:3000/SCHImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        // console.log(res.data);
		this.proImg = this.data[`watchpay3_3_3.jpg`] ;
		this.colorTitle = '红色'
		this.imgType = 1;
		this.now = 1;
      });
    },
	getProductData(){
        let url = `http://localhost:3000/product/22`;
         axios.get(url).then(res=>{
            this.productData = res.data
            console.log(res.data)
          })
    },
	changeSize(i)	{
		if(i == 0){
			//0 41毫米
			this.sizeTitle ='41毫米 ';
			this.proPrice = this.productData.biaokechicun[0].price;
			this.now2 = 0;

		}else if(i==1){
			//1 45毫米
			this.sizeTitle ='45毫米 ';
			this.proPrice = this.productData.biaokechicun[1].price;
			this.now2 = 1;
		}
		// this.proImg = this.productData.toListImg;
		
	},
	addToShopBag() {
            let user = sessionStorage.getItem("user");
            //判断是否选择了商品
            if (this.now2 < 0 || this.now < 0) {
                return;
            }
            // 判断是否登录过，否则就直接返回到登录页面
            if (user == "" || !user) {
                this.$refs.msgMaskbtn.setInformation({
                    title: "未登录",
                    // btnTitle:'去登陆',
                    callback() {
                        this.$router.push("/login");
                    },
                });
                this.$refs.msgMaskbtn.showbtnMask();
                return;
            }

            //解析json字符串为js对象
            user = JSON.parse(user);

            //用户信息已经拿到了,接下来是拿到用户购物袋的信息
            let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
            axios.get(userurl).then((res) => {
                this.userBagData = res.data;

				this.proTitle = 'Apple Watch Series SE '+this.sizeTitle + this.colorTitle

                let seemProduct = this.checkProductNum(this.proTitle);

                //商品在数据库里的数量如果不等于空
                //就代表着有重复着的数据
                if (seemProduct != null) {
                    let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
                    seemProduct.num += 1;
                    // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
                    // 另外需要将对象里的num数量+1
                    axios.put(url2, seemProduct).then((res) => {
                        this.$refs.msgMaskbtn.setInformation({
                            title: "添加商品成功",
                        });
                        this.$refs.msgMaskbtn.showbtnMask();
                    });
                } 
                else {
                    //这里是没找到重复商品的操作
                    //正常的添加操作 post
                    let url = `http://localhost:3000/user/${user.id}/shopBagList`;
                    axios
                        .post(url, {
                            title: this.proTitle,
                            price: this.proPrice,
                            img: this.proImg,
                            num: 1, //默认的参数 已添加为1
                            //post的参数是一个对象，里面只接受四个参数
                        })
                        .then((res) => {
                            this.$refs.msgMaskbtn.setInformation({
                                title: "添加商品成功",
                            });
                            this.$refs.msgMaskbtn.showbtnMask();
                        });
                }
            });
        },
    checkProductNum(proTitle) {
            //检查用户列表下的商品数量
            //返回值 重复的商品对象
            //参数，需要进行检查的商品标题
            for (const e of this.userBagData) {
                if (e.title == proTitle) {
                    return e;
                }
            }
            return null;
        },
	handleScroll() {
      //这个滚动函数是声明在window里的，也就是说，其他人的页面也会有这个滚动函数，
      //但是并没有ipadpro里的各种对象，所以会报错，
      //故加一个if判断，当路由的路径是ipadPro时，才会运行这段代码
      // console.log(this.$route.path)
      // let box2 = document.getElementById("box2Content");
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //  console.log(this.scrollTop)
    }
  },
  mounted() {
    this.getData();
	 this.getProductData();
	 window.addEventListener("scroll", this.handleScroll, true);
  },
    destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  };
</script>

<style lang="less" scoped>
  #watchsSE{
    width: 100%;
    height: 100%;
  }

  .imgArray{
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	
	img{
		width: 32px;
		height: 32px;
	}
  }

  .imgBor{
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	border: 1px solid #fff;
  }

  .bor1{
	border: 3px solid #0071e3;
  }
</style>
<style scoped src="../assets/css/watchSE.css"></style>